<template>
	<view :class="'option-container flex' + (active ? ' active' : '')" @tap="clickHandle">
		<image v-if="icon" class="icon" :src="icon" mode="aspectFit"></image>
		<view class="text">{{content}}</view>
		<view class="option">
			<image v-if="active" src="@/static/images/icon/checkmark2.png" mode="aspectFit"></image>
			<image v-else src="@/static/images/icon/checkmark.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Option",
		props: {
			content: {
				type: String,
				required: true
			},
			active: {
				type: Boolean,
				required: true
			},
			icon: {
				type: String
			},
		},
		data() {
			return {

			}
		},
		methods: {
			clickHandle() {
				this.$emit("optionClicked", !this.active);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.option-container {
		position: relative;
		height: 108upx;
		line-height: 104upx;
		border: 4upx solid #333;
		border-radius: 25upx;
		padding: 0 24upx;

		&.active {
			background-color: #FFF383;
		}

		.icon {
			width: 84upx;
			height: 50upx;
			margin-right: 8px;
			margin-top: 28upx;
		}

		.text {
			font-size: 24upx;
			font-weight: bold;
			color: #3D3D3D;
		}

		.option {
			position: absolute;
			right: 20upx;
			margin-top: 6upx;

			image {
				width: 36upx;
				height: 36upx;
			}
		}
	}
</style>